<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
</head>

<body>

</body>
<script>
    // 要求: 依次按属性发送三个请求, (三个请求之间有关联,后面的请求向依赖于前面的)


    // 同时发送三个请求
    // 1. 先请求不一定先响应
    // 2. 请求都是异步操作  => 此时不方便将请求结果依次拼接
    // var str = "";
    // ajax({
    //     type: "get",
    //     url: "../data/1.txt",
    //     success: function (res) {
    //         console.log("请求成功", res);
    //         str += res;
    //     },
    // })

    // ajax({
    //     type: "get",
    //     url: "../data/2.txt",
    //     success: function (res) {
    //         console.log("请求成功", res);
    //         str += res;
    //     },
    // })

    // ajax({
    //     type: "get",
    //     url: "../data/3.txt",
    //     success: function (res) {
    //         console.log("请求成功", res);
    //         str += res;
    //     },
    // })
    // console.log("str", str);


    // 依次发送请求  

    // 多个回调函数相互嵌套 => 恐怖回调/地域回调/回调函数噩梦
    // 回调函数噩梦(恐怖回调)，也被称为恶魔金字塔，例如ajax依赖调用时，回调函数会层层嵌套，而这种层层嵌套的写法，往往会让人难以理解，所以称之为噩梦。
    var str = "";
    ajax({
        type: "get",
        url: "../data/1.txt",
        success: function (res) {
            console.log("请求成功", res);
            str += res;

            ajax({
                type: "get",
                url: "../data/2.txt",
                success: function (res) {
                    console.log("请求成功", res);
                    str += res;

                    ajax({
                        type: "get",
                        url: "../data/3.txt",
                        success: function (res) {
                            console.log("请求成功", res);
                            str += res;

                            console.log("str", str);
                        },
                    })
                },
            })
        },
    })








</script>

</html>